<template>
  <div>
    <TopFilter :list="topFilterList" :collapse="false" @filterChange="changeHandle"
               @onCollapse="collapseHandle"></TopFilter>
    <FilterTable
      height="400"
      :selectionType="selectionType"
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="getfetchParams"
      :rowstyles="rowstyles"
      :onSyncTableData="syncPjFun"
      datakey="records"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectChange"
    >
    </FilterTable>

    <el-col :span="24" style="margin-top:10px;">
      <div class="btn">
        <el-button size="small"  type="primary" class="btnStyle" @click="submitBtn">确定
        </el-button>
        <el-button size="small"  type="primary" class="btnStyle" @click="closeDialog">取消
        </el-button>
      </div>
    </el-col>

  </div>
</template>

<script>
  import {dictionary} from '@/utils/dictMixin';
  import { getVehicleList } from '@/api/serviceass/pdimanage/meetingcar';

  export default {
    name: 'addVehicle',
    components: {},
    mixins: [dictionary],
    data() {
      this.BaseTable = null;
      return {
        topFilterList: this.createTopFilterList(),
        visible: false,
        fetchApi: getVehicleList,
        fetchParams: { fwdjlx: '50091001' },
        columns: this.createTableColumns(),
        selectArr: [],
        rowstyles: []
      };
    },
    props: {
      selectionType: {

      },
      params: {
        type: Object,
        default(){
          return {}
        }
      }
    },//'single':'multiple' 单选多选
    computed: {
      getfetchParams() {
        return Object.assign({}, this.params, this.fetchParams);
      }
    },
    mounted() {
      this.BaseTable = this.$refs.table.$refs.pageTable;
    },
    methods: {
      selectChange(val) {
        this.selectArr = val
        console.log(val)
      },
      createTableColumns() {
        return [
          {
            title: '序号',
            dataIndex: 'index',
            width: 70,
            sorter: true,
            render: props => {
              return <span>{props.row.index + 1}</span>;
            }
          },
          {
            title: 'VIN',
            dataIndex: 'fwvinm',
            sorter: true,
          },
          {
            title: '发动机号/电机号',
            dataIndex: 'fwfdjh',
            sorter: true,
          },
          {
            title: '车型',
            dataIndex: 'fwchex',
            sorter: true,
          },
          {
            title: '生产日期',
            dataIndex: 'fwscrq',
            sorter: true,
            dateFormat: 'yyyy-MM-dd hh:mm:ss',
          },
        ]
      },
      createTopFilterList() {
        return [
          {
            type: 'INPUT',
            label: 'VIN',
            fieldName: 'fwvinm',
            placeholder: '车辆唯一识别代码...'
          },
        ];
      },
      collapseHandle() {
        this.$nextTick(() => {
          this.BaseTable.EXECUTE_RESET_HEIGHT();
        });
      },
      changeHandle(val) {
        this.fetchParams = Object.assign({}, val, { fwdjlx: '50091001', xhrAbort: false });
      },
      closeHandler(val, type) {
        this.visible = val;
        if (type === 'refresh') {
          // 重新加载
          this.fetchParams = {...this.fetchParams};
        }
      },
      closeDialog() {
        this.$emit('closeDialog')
      },
      submitBtn() {
        if(this.selectArr.length==0){
          this.$notify.warning({title: '提示信息', message: '请您选择车辆'});
          return
        }
        this.$emit('selectArr', this.selectArr)
      },
      syncPjFun(details, isOverdue){
        console.info(details)
        if (!details.length) return;
        details.forEach(x => {
          if (x.color === 'red') {
            // console.log(x,"x")
            this.rowstyles.push({ row: x, styles: { background: '#FF0000' } });
          }
        });
      },
    }
  };
</script>

<style lang="less" scoped>
  .bg1 {
    border: 1px solid @borderColor;
    border-radius: @borderRadius;
    box-shadow: @boxShadow;
    padding: @modulePadding;
    padding-left: 0;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .bg2 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .btn {
    text-align: center;
  }

  .btnStyle {
    margin-top: 10px;
  }

</style>
